<template>
    <div class="state-loading">
        <div class="indicator"></div>
    </div>
</template>
<script>
    export default {
        name: 'loading',
        props: {
            show: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {};
        },
        mounted() {
            this.$el.style.height = this.show * 3 + 'px';
        },
        watch: {
            show(val, oldVal) {
                let that = this;
                if (!val) {
                    that.$el.style.height = val * 3 + 'px';
                    return false;
                }
                this.$el.style.height = val * 3 + 'px';
            }
        }
    };
</script>
<style lang="scss">
    .state-loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #58c981;
        height: 0;
        transition: height .3s;
        z-index: 9999;
    }

    .state-loading .indicator {
        background: -webkit-gradient(linear, 80% 46%, 10% 21%, from(#ff8754), to(#58c981));
        height: 100%;
        width: 70%;
        animation: loading 1s infinite ease-out
    }

    @keyframes loading {
        from {
            transform: translateX(-100%)
        }
        to {
            transform: translateX(150%)
        }
    }

</style>
